<!doctype html>
<html lang="zh-cn">
  <head>
  <meta charset="utf-8">
<title>web基础 - Huanghs blog</title>
<meta name="viewport" content="width=device-width, initial-scale=1">


  <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png?v=1">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png?v=1">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png?v=1">
  <link rel="manifest" href="/favicon/site.webmanifest?v=1">
  
    <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg?v=1" color="#ffffff">
    <link rel="shortcut icon" href="/favicon/favicon.ico?v=1">
    <meta name="msapplication-config" content="/favicon/browserconfig.xml?v=1">
  
  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="theme-color" content="#ffffff">

<meta name="generator" content="Hugo 0.66.0" /><meta itemprop="name" content="web基础">
<meta itemprop="description" content="web开发是创建web页面或app等前端界面呈现给用户的过程，通过HTML，CSS，Javascript以及衍生出的各类框架解决方案，来实现互联网产品的用户界面的交互">
<meta itemprop="datePublished" content="2020-03-31T11:45:23&#43;08:00" />
<meta itemprop="dateModified" content="2020-03-31T11:45:23&#43;08:00" />
<meta itemprop="wordCount" content="215">
<meta itemprop="image" content="https://raw.githubusercontent.com/hhs44/cloudimg/master/img/20200331114355.png">



<meta itemprop="keywords" content="前端," /><meta property="og:title" content="web基础" />
<meta property="og:description" content="web开发是创建web页面或app等前端界面呈现给用户的过程，通过HTML，CSS，Javascript以及衍生出的各类框架解决方案，来实现互联网产品的用户界面的交互" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://hhs44.github.io/blog/web%E5%9F%BA%E7%A1%80/" />
<meta property="og:image" content="https://raw.githubusercontent.com/hhs44/cloudimg/master/img/20200331114355.png" />
<meta property="article:published_time" content="2020-03-31T11:45:23+08:00" />
<meta property="article:modified_time" content="2020-03-31T11:45:23+08:00" />
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://raw.githubusercontent.com/hhs44/cloudimg/master/img/20200331114355.png"/>

<meta name="twitter:title" content="web基础"/>
<meta name="twitter:description" content="web开发是创建web页面或app等前端界面呈现给用户的过程，通过HTML，CSS，Javascript以及衍生出的各类框架解决方案，来实现互联网产品的用户界面的交互"/>
<meta name="twitter:site" content="@example"/>
<link rel="stylesheet" href="/css/bundle.min.b2b2abee095149a60c0a1a2c4fab4b7c140b32ca88abc3d2f83d0dd903b6f634.css" integrity="sha256-srKr7glRSaYMChosT6tLfBQLMsqIq8PS&#43;D0N2QO29jQ=">
        <link rel="stylesheet" href="/css/add-on.css">

</head>

  <body>
    
<header id="site-header">
  <nav id="site-nav">
    <h1 class="nav-title">
      <a href="/">
        
          
            博客
          
        
      </a>
    </h1>
    <menu id="site-nav-menu" class="flyout-menu">
      
        
          
          
            <a href="/" class="link"><i class='fa fa-home'></i> 首页</a>
          
        
      
        
          
          
            <a href="/blog/" class="link"><i class='far fa-newspaper'></i> 博客</a>
          
        
      
        
          
          
            <a href="/categories/" class="link"><i class='fas fa-sitemap'></i> 分类</a>
          
        
      
        
          
          
            <a href="/tags/" class="link"><i class='far fa-envelope'></i> 标签</a>
          
        
      
        
          
          
            <a href="/about/" class="link"><i class='far fa-id-card'></i> 关于</a>
          
        
      
      <a href="#share-menu" class="share-toggle"><i class="fas fa-share-alt">&nbsp;</i>Share</a>
      

    </menu>
    

    <a href="#share-menu" class="share-toggle"><i class="fas fa-share-alt fa-2x">&nbsp;</i></a>
    <a href="#lang-menu" class="lang-toggle" lang="zh-cn">zh-cn</a>
    <a href="#site-nav" class="nav-toggle"><i class="fas fa-bars fa-2x"></i></a>
  </nav>
  <menu id="lang-menu" class="flyout-menu">
  <a href="#" lang="zh-cn" class="link active">中文 (zh-cn)</a>
  
    
      
        <a href="/en" lang="en" class="no-lang link">English (en)</a>
      
    
      
    
  
</menu>

  
    <menu id="share-menu" class="flyout-menu">
      <h1>Share Post</h1>
      





    </menu>
  
</header>


    <div id="wrapper">
      <section id="site-intro">
  <a href="/"><img src="https://raw.githubusercontent.com/hhs44/cloudimg/master/img/head.jpg" class="circle" width="" alt="huang`s blog " /></a>
  <header>
    <h1>Huanghs的个人博客 </h1>
  </header>
  <main>
    <p>不写下一些东西，就没法证明自己<br> 不多走一些路，就没法看到更多的风景</p>
  </main>
  
    <footer>
      <ul class="socnet-icons">
        

        <li><a href="//github.com/hhs44/hhs44.github.io" target="_blank" rel="noopener" title="GitHub" class="fab fa-github"></a></li>






<li><a href="//flickr.com/photos/example" target="_blank" rel="noopener" title="Flickr" class="fab fa-flickr"></a></li>




<li><a href="//linkedin.com/in/example" target="_blank" rel="noopener" title="LinkedIn" class="fab fa-linkedin"></a></li>
<li><a href="//linkedin.com/company/examplebusiness" target="_blank" rel="noopener" title="LinkedIn Company" class="fab fa-linkedin"></a></li>



<li><a href="//facebook.com/example" target="_blank" rel="noopener" title="Facebook" class="fab fa-facebook"></a></li>
<li><a href="//reddit.com/user/example" target="_blank" rel="noopener" title="Reddit" class="fab fa-reddit"></a></li>





<li><a href="weixin://contacts/profile/22" target="_blank" rel="noopener" title="WeChat" class="fab fa-weixin"></a></li>
<li><a href="//wpa.qq.com/msgrd?v=3&amp;uin=1159986871&amp;site=qq&amp;menu=yes" target="_blank" rel="noopener" title="QQ" class="fab fa-qq"></a></li>
<li><a href="//instagram.com/example" target="_blank" rel="noopener" title="Instagram" class="fab fa-instagram"></a></li>

<li><a href="//twitter.com/example" target="_blank" rel="noopener" title="Twitter" class="fab fa-twitter"></a></li>


<li><a href="//pinterest.com/example" target="_blank" rel="noopener" title="Pinterest" class="fab fa-pinterest-p"></a></li>
<li><a href="//telegram.me/example" target="_blank" rel="noopener" title="telegram" class="fab fa-telegram"></a></li>



<li><a href="//researchgate.net/profile/example" target="_blank" rel="noopener" title="Research Gate"><i class="ai ai-researchgate"></i></a></li>
<li><a href="//keybase.io/example" target="_blank" rel="noopener" title="keybase" class="fab fa-keybase"></a></li>
<li><a href="//example.com/@example" target="_blank" rel="noopener" title="mastodon" class="fab fa-mastodon"></a></li>
<li><a href="mailto:1159986871@qq.com" target="_blank" title="Email" class="far fa-envelope"></a></li>

      </ul>
    </footer>
  
</section>


      <main id="site-main">
        <article class="post">
  <header>
  <div class="title">
    
        <h2><a href="/blog/web%E5%9F%BA%E7%A1%80/">web基础</a></h2>
    
    
        <p>web开发是创建web页面或app等前端界面呈现给用户的过程，通过HTML，CSS，Javascript以及衍生出的各类框架解决方案，来实现互联网产品的用户界面的交互</p>
    
</div>
  <div class="meta">
    <time class="published" datetime="2020-03-31 11:45:23 &#43;0800 CST">
      March 31, 2020
    </time>
    <span class="author">Huanghs</span>
    
      <p>2 分钟</p>
    
  </div>
</header>

  <section id="socnet-share">
    





  </section>
  
  <a href="/blog/web%E5%9F%BA%E7%A1%80/" class="image featured">
    
      <img src="https://raw.githubusercontent.com/hhs44/cloudimg/master/img/20200331114355.png" alt="">
    
  </a>


  <div class="content">
    <h1 id="web前端了解篇">web前端了解篇</h1>
<p>web前端是由网页制作演变而来，现在随着互联网的快速发展，前端不只是尽显于图片和文字的静态展示，还需要完成于用户的交互，以及各种功能的集合。</p>
<p>[TOC]</p>
<h2 id="1web前端的主要结构">1web前端的主要结构</h2>
<ul>
<li>结构层
<ul>
<li>指的就是HTML,使用网页标签对代码里的普通文本进行标注，不同的标签显示不同的含义，从而构建整个HTML文档的结构。</li>
</ul>
</li>
<li>表现层
<ul>
<li>指的是CSS,使用CSS样式来控制HTML标签，例如设置标签的版式、颜色、大小等外观，让整个HTML界面变得更加美观，便于欣赏。</li>
</ul>
</li>
<li>行为层
<ul>
<li>指的是JavaScript,简称JS. 使用HTML标签可以搭建一个网页的结构，使用CSS可以将HTML文档里的结构更加的美观，但是此时的网页是一个完全静态的，无法实现和用户的交互。使用JS可以实现页面和用户的交互。</li>
</ul>
</li>
</ul>
<h2 id="2前端开发的核心技术">2前端开发的核心技术</h2>
<ul>
<li>HTML语言</li>
</ul>
<p>HTML是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。</p>
<ul>
<li>CSS</li>
</ul>
<p>CSS 是一种样式规则语言，可将样式应用于 HTML 内容， 例如设置背景颜色和字体，在多个列中布局内容。</p>
<ul>
<li>JavaScript</li>
</ul>
<p>JavaScript 是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。（好吧，虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。）</p>
<h2 id="3前端优化">3前端优化</h2>
<ol>
<li>
<p>尽量减少HTTP请求 (Make Fewer HTTP Requests)</p>
</li>
<li>
<p>减少DNS 查找 (Reduce DNS Lookups)</p>
</li>
<li>
<p>避免重定向 (Avoid Redirects)</p>
</li>
<li>
<p>使得 Ajax 可缓存 (Make Ajax Cacheable)</p>
</li>
<li>
<p>延迟载入组件 (Post-load Components)</p>
</li>
<li>
<p>预载入组件 (Preload Components)</p>
</li>
<li>
<p>减少DOM元素数量 (Reduce the Number of DOM Elements)</p>
</li>
<li>
<p>切分组件到多个域 (Split Components Across Domains)</p>
</li>
<li>
<p>最小化iframe的数量 (Minimize the Number of iframes)</p>
</li>
<li>
<p>杜绝 http404错误 (No 404s)</p>
</li>
</ol>
<h2 id="4前端框架了解">4前端框架了解</h2>
<p>web框架的学习是为了加快web开发速度，节约时间成本。</p>
<p>以下框架介绍来自百度百科：</p>
<p><strong>Bootstrap</strong></p>
<p>主流框架之一，Bootstrap 是基于 HTML、CSS、JavaScript的，它简洁灵活，使得 Web 开发更加快捷。</p>
<p><strong>html5-boilerplate</strong></p>
<p>该框架可以快速构建健壮，且适应力强的web app或网站。</p>
<p><strong>Meteor</strong></p>
<p>Meteor是新一代的开发即时web应用的开源框架，它能在较短时间内完成开发。</p>
<p><strong>Semantic UI</strong></p>
<p>基于自然语言有效原则的UI组件框架</p>
<p><strong>Foundation</strong></p>
<p>优秀的响应式前端框架</p>
<p><strong>Materialize</strong></p>
<p>基于材料设计的现代化响应式前端框架。可提供默认的样式，自定义组件。此外，Materialize还改进动画和过渡，为开发人员提供流畅的体验。</p>
<p><strong>Pure</strong></p>
<p>几乎可以在每一个web项目中使用的一组小的和响应式的CSS模块。</p>
<p><strong>Vue</strong></p>
<p>Vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。</p>
<p><strong>Skeleton</strong></p>
<p>Skeleton 是一个小的 JS 和 CSS 文件的集合,可快速开发漂亮的网站,适合各种屏幕设备包括手机。Skeleton 基于 960 grid 开发。它是一个 UI 框架。</p>
<p><strong>Amaze UI</strong></p>
<p>国内首个开源HTML5跨屏前端框架产品系列，中文排版支持更优、本土化组件丰富。该产品系列中有专门针对移动端的HTML5混合应用开发框架Amaze UI Touch以及针对跨屏HTML5网页开发的Amaze UI Web。其中，Amaze UI Touch可以帮助开发者通过丰富的组件，快速构建出与原生APP相媲美的专属移动端的HTML5应用。</p>
<p><strong>UIkit</strong></p>
<p>一个轻量级的和模块化的前端框架,用于快速开发和功能强大的web接口。</p>
<p><strong>Yui</strong></p>
<p>Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库，为了能建立一个高互动的网页，它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。使用授权为 BSD许可证。</p>
<p><strong>kissy</strong></p>
<p>一款跨终端、模块化、高性能、使用简单的 JavaScript 框架。</p>
<p><strong>MUI</strong></p>
<p>最接近原生App体验的前端框架的框架。</p>
<p><strong>Arale</strong></p>
<p>一个开放、简单、易用的前端基础类库。</p>
<p><strong>JX</strong></p>
<p>JX 是模块化的非侵入式Web前端框架，特别适合构建和组织大规模、工业级的Web App。</p>
<p><strong>GMU</strong></p>
<p>GMU是基于zepto的mobile UI组件库，提供webapp、pad端简单易用的UI组件! Web App。</p>
<p><strong>ZUI</strong></p>
<p>开源HTML5前端框架</p>
<p><strong>Clouda Touch.js</strong></p>
<p>Touch.js是移动设备上的手势识别与事件库,也是在百度内部广泛使用的开发。 [4]</p>
<h2 id="5简单演示">5简单演示</h2>
<ul>
<li>首先使用HTML将文本标记起来</li>
</ul>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-html" data-lang="html">&lt;<span style="color:#f92672">p</span>&gt;姓名：小汪&lt;/<span style="color:#f92672">P</span>&gt;
</code></pre></div><p>姓名：小汪</P>
<ul>
<li>加入css使它更好看</li>
</ul>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-css" data-lang="css">.<span style="color:#a6e22e">p</span>{
	<span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">sans-serif</span>, <span style="color:#e6db74">&#39;黑体&#39;</span>;
    <span style="color:#66d9ef">border</span>: <span style="color:#ae81ff">2</span><span style="color:#66d9ef">px</span> <span style="color:#66d9ef">solid</span> rgba(<span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">200</span>, <span style="color:#ae81ff">0.6</span>);
    <span style="color:#66d9ef">text-align</span>:<span style="color:#66d9ef">center</span>;
    bakground:rgba(<span style="color:#ae81ff">0</span>,<span style="color:#ae81ff">22.200.0.3</span>);
    <span style="color:#66d9ef">color</span>:<span style="color:#66d9ef">red</span>;
    <span style="color:#66d9ef">box-shadow</span>:<span style="color:#ae81ff">1</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">1</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">2</span><span style="color:#66d9ef">px</span> rgba(<span style="color:#ae81ff">0</span>,<span style="color:#ae81ff">0</span>,<span style="color:#ae81ff">200</span>,<span style="color:#ae81ff">0.8</span>);
    <span style="color:#66d9ef">cursor</span>:potinter;
    <span style="color:#66d9ef">border-radius</span>:<span style="color:#ae81ff">10</span><span style="color:#66d9ef">px</span>;
    <span style="color:#66d9ef">display</span>: <span style="color:#66d9ef">inline</span><span style="color:#f92672">-</span><span style="color:#66d9ef">block</span>;
    <span style="color:#66d9ef">letter-spacing</span>: <span style="color:#ae81ff">1</span><span style="color:#66d9ef">px</span>;
}
</code></pre></div><div style="font-family: sans-serif, '黑体';
    border: 2px solid rgba(0, 0, 200, 0.6);
    text-align:center;
    bakground:rgba(0,22.200.0.3);
    color:red;
    box-shadow:1px 1px 2px rgba(0,0,200,0.8);
    cursor:potinter;
    border-radius:10px;
    display: inline-block;
    letter-spacing: 1px;">
姓名：小汪    
</div>
<ul>
<li>加入JavaScript实现动态行为</li>
</ul>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">para</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">querySelector</span>(<span style="color:#e6db74">&#39;p&#39;</span>);

<span style="color:#a6e22e">para</span>.<span style="color:#a6e22e">addEventListener</span>(<span style="color:#e6db74">&#39;click&#39;</span>, <span style="color:#a6e22e">updateName</span>);

<span style="color:#66d9ef">function</span> <span style="color:#a6e22e">updateName</span>() {
  <span style="color:#66d9ef">let</span> <span style="color:#a6e22e">name</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">prompt</span>(<span style="color:#e6db74">&#39;输入一个新的名字：&#39;</span>);
  <span style="color:#a6e22e">para</span>.<span style="color:#a6e22e">textContent</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;姓名：&#39;</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">name</span>;
}
</code></pre></div><p><img src="https://raw.githubusercontent.com/hhs44/cloudimg/master/img/20200331175931.png" alt="" /></p>

  </div>
  <footer>
    <ul class="stats">
  
    
    
      <li class="categories">
        <ul>
          
            
            <li><a class="article-category-link" href="https://hhs44.github.io/categories/web">web</a></li>
          
        </ul>
      </li>
    
  
  
    
    
      <li class="tags">
        <ul>
          
            
            <li><a class="article-category-link" href="https://hhs44.github.io/tags/%E5%89%8D%E7%AB%AF">前端</a></li>
          
        </ul>
      </li>
    
  
</ul>

  </footer>
</article>

    <article class="post">
      
<div>
  <h2>说些什么</h2>
    <form id="post-js-form" class="post-new-comment" method="POST">
      
      <h5 class='post-reply-notice hidden'>
        <span class='post-reply-arrow'></span><span class='post-reply-name'></span>
      </h5>

      
      <input type="hidden" name="options[entryId]" value="521822163ab658598d7f7df97e5fa335">
      <input type='hidden' name='fields[replyThread]' value=''>
      <input type='hidden' name='fields[replyID]' value=''>
      <input type='hidden' name='fields[replyName]' value=''>

      
      <input required name='fields[name]' type='text' placeholder='您的名字（必填）'>
      <input name='fields[website]' type='text' placeholder='您的网站'>
      <input required name='fields[email]' type='email' placeholder='您的电邮地址（必填，用于 Gravatar 头象）'>
      <textarea required name='fields[body]' placeholder='您的留言。可使用 Markdown。（搜索 &#39;Markdown 語法速查&#39;）' rows='10'></textarea>

      
      

      
      <p class='post-submit-notice'>
        <strong class='post-submit-notice-text submit-success hidden'>感谢您的评论！被批准后它会立即在此站点展示。</strong>
        <strong class='post-submit-notice-text submit-failed hidden'>很抱歉，您的提交存在错误。请确保所有必填字段都已填写正确，然后再试一次。</strong>
      </p>

      
      <input type='submit' value='送出' class='button'>
      <input type='submit' value='已送出' class='hidden button' disabled>
      <input type='reset' value='重设' class='button'>
    </form>
</div>


<div>
  <h2>评论</h2>

  
    
      <p>还沒有留言。</p>
    
  
</div>

    </article>


<div class="pagination">
  
    <a href="/blog/javascript%E5%AD%A6%E4%B9%A0%E4%B8%80/" class="button"><div class="previous"><div>JavaScript学习（一）</div></div></a>
  
  
    <a href="/blog/html%E5%AD%A6%E4%B9%A0%E4%B8%80/" class="button"><div class="next"><div>HTML学习一</div></div></a>
  
</div>


      </main>
      <div class="post-toc">
     
    <aside>
        <header>
        <h4>web基础的字数: 215</h4> 
        </header><nav id="TableOfContents">
  <ul>
    <li><a href="#web前端了解篇">web前端了解篇</a>
      <ul>
        <li><a href="#1web前端的主要结构">1web前端的主要结构</a></li>
        <li><a href="#2前端开发的核心技术">2前端开发的核心技术</a></li>
        <li><a href="#3前端优化">3前端优化</a></li>
        <li><a href="#4前端框架了解">4前端框架了解</a></li>
        <li><a href="#5简单演示">5简单演示</a></li>
      </ul>
    </li>
  </ul>
</nav></aside>
    <a href="#" id="toc-toggle"></a>
     
</div>
      <section id="site-sidebar">
  
    <section id="recent-posts">
      <header>
        <h1>最新文章</h1>
      </header>
      
      <article class="mini-post">
        <section>
          
  <a href="/blog/css%E5%AD%A6%E4%B9%A0%E4%B8%80/" class="image featured">
    
      <img src="https://raw.githubusercontent.com/hhs44/cloudimg/master/img/20200331114355.png" alt="">
    
  </a>


        </section>
        <header>
          <h1><a href="/blog/css%E5%AD%A6%E4%B9%A0%E4%B8%80/">CSS学习一</a></h1>
          <time class="published" datetime="">March 31, 2020</time>
        </header>
      </article>
      
      <article class="mini-post">
        <section>
          
  <a href="/blog/html%E5%AD%A6%E4%B9%A0%E4%B8%80/" class="image featured">
    
      <img src="https://raw.githubusercontent.com/hhs44/cloudimg/master/img/20200331114355.png" alt="">
    
  </a>


        </section>
        <header>
          <h1><a href="/blog/html%E5%AD%A6%E4%B9%A0%E4%B8%80/">HTML学习一</a></h1>
          <time class="published" datetime="">March 31, 2020</time>
        </header>
      </article>
      
      <article class="mini-post">
        <section>
          
  <a href="/blog/web%E5%9F%BA%E7%A1%80/" class="image featured">
    
      <img src="https://raw.githubusercontent.com/hhs44/cloudimg/master/img/20200331114355.png" alt="">
    
  </a>


        </section>
        <header>
          <h1><a href="/blog/web%E5%9F%BA%E7%A1%80/">web基础</a></h1>
          <time class="published" datetime="">March 31, 2020</time>
        </header>
      </article>
      
      
        <a href="/blog/" class="button">查看更多</a>
      
    </section>
  

  
    
      <section id="categories">
        <header>
          <h1><a href="/categories">分类</a></h1>
        </header>
        <ul>
          
            
          
          
          <li>
            
              <a href="/categories/python/">python<span class="count">6</span></a>
            
          
          <li>
            
              <a href="/categories/linux/">linux<span class="count">4</span></a>
            
          
          <li>
            
              <a href="/categories/web/">web<span class="count">4</span></a>
            
          
          <li>
            
              <a href="/categories/hexo/">hexo<span class="count">3</span></a>
            
          
          <li>
            
              <a href="/categories/jetbrain/">jetbrain<span class="count">2</span></a>
            
          
          <li>
            
              <a href="/categories/test/">test<span class="count">2</span></a>
            
          
          <li>
            
              <a href="/categories/%E5%89%8D%E7%AB%AF/">前端<span class="count">2</span></a>
            
          
          <li>
            
              <a href="/categories/%E6%95%B0%E6%8D%AE%E5%BA%93/">数据库<span class="count">2</span></a>
            
          
          <li>
            
              <a href="/categories/conda/">conda<span class="count">1</span></a>
            
          
          <li>
            
              <a href="/categories/development/">development<span class="count">1</span></a>
            
          
          <li>
            
              <a href="/categories/golang/">golang<span class="count">1</span></a>
            
          
          <li>
            
              <a href="/categories/java/">java<span class="count">1</span></a>
            
          
          <li>
            
              <a href="/categories/syntax/">syntax<span class="count">1</span></a>
            
          
          <li>
            
              <a href="/categories/%E9%80%9A%E4%BF%A1/">通信<span class="count">1</span></a>
            
          
          </li>
        </ul>
      </section>
    
  

  
    <section id="mini-bio">
      <header>
        <h1>关于</h1>
      </header>
      <p>test</p>
      <footer>
        <a href="/about" class="button">了解更多</a>
      </footer>
    </section>
  
</section>

      <footer id="site-footer">
  
      <ul class="socnet-icons">
        

        <li><a href="//github.com/hhs44/hhs44.github.io" target="_blank" rel="noopener" title="GitHub" class="fab fa-github"></a></li>






<li><a href="//flickr.com/photos/example" target="_blank" rel="noopener" title="Flickr" class="fab fa-flickr"></a></li>




<li><a href="//linkedin.com/in/example" target="_blank" rel="noopener" title="LinkedIn" class="fab fa-linkedin"></a></li>
<li><a href="//linkedin.com/company/examplebusiness" target="_blank" rel="noopener" title="LinkedIn Company" class="fab fa-linkedin"></a></li>



<li><a href="//facebook.com/example" target="_blank" rel="noopener" title="Facebook" class="fab fa-facebook"></a></li>
<li><a href="//reddit.com/user/example" target="_blank" rel="noopener" title="Reddit" class="fab fa-reddit"></a></li>





<li><a href="weixin://contacts/profile/22" target="_blank" rel="noopener" title="WeChat" class="fab fa-weixin"></a></li>
<li><a href="//wpa.qq.com/msgrd?v=3&amp;uin=1159986871&amp;site=qq&amp;menu=yes" target="_blank" rel="noopener" title="QQ" class="fab fa-qq"></a></li>
<li><a href="//instagram.com/example" target="_blank" rel="noopener" title="Instagram" class="fab fa-instagram"></a></li>

<li><a href="//twitter.com/example" target="_blank" rel="noopener" title="Twitter" class="fab fa-twitter"></a></li>


<li><a href="//pinterest.com/example" target="_blank" rel="noopener" title="Pinterest" class="fab fa-pinterest-p"></a></li>
<li><a href="//telegram.me/example" target="_blank" rel="noopener" title="telegram" class="fab fa-telegram"></a></li>



<li><a href="//researchgate.net/profile/example" target="_blank" rel="noopener" title="Research Gate"><i class="ai ai-researchgate"></i></a></li>
<li><a href="//keybase.io/example" target="_blank" rel="noopener" title="keybase" class="fab fa-keybase"></a></li>
<li><a href="//example.com/@example" target="_blank" rel="noopener" title="mastodon" class="fab fa-mastodon"></a></li>
<li><a href="mailto:1159986871@qq.com" target="_blank" title="Email" class="far fa-envelope"></a></li>

      </ul>
  
  <p class="copyright">
    
      &copy; 2020
      
        Huanghs blog
      
    . <br>
    主题: <a href='https://themes.gohugo.io/hugo-future-imperfect-slim/' target='_blank' rel='noopener'>Hugo Future Imperfect Slim</a><br>移植自 <a href='https://html5up.net/future-imperfect' target='_blank' rel='noopener'>HTML5 UP</a> | 由 <a href='https://gohugo.io/' target='_blank' rel='noopener' title='0.66.0'>Hugo</a> 驱动
  </p>
</footer>
<a id="back-to-top" href="#" class="fas fa-arrow-up fa-2x"></a>

      <script src="/js/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script><script src="/js/bundle.min.b17fef5a58c033a8a59f57c83aa975a251aecff921cbd36c12e975d530fa023b.js" integrity="sha256-sX/vWljAM6iln1fIOql1olGuz/khy9NsEul11TD6Ajs="></script>
    <script src="/js/add-on.js"></script>
    </div>
  </body>
</html>
